<template>
    <div class="remind">
        <div class="remind-item" @click="$router.push(`/messageDetail?id=${item.id}`)" v-for="(item, index) in list" :key="index">
            <div class="top flex-box-align">
                <div class="time flex">{{item.gmtCreated}}</div>
                <div class="remind-icon">
                    <img v-if="item.isRead === 'n'" src="../images/3@2x.png" alt="">
                </div>
            </div>
            <div v-if="item.isRead === 'n'">
                <div>您好</div>
                <div>您有未读的提醒消息，请点击查看！</div>
            </div>
            <div v-else>
                <div>您好</div>
                <div class="hidden">{{item.content}}</div>
            </div>
        </div>

        <div class="empty" v-show="list.length === 0">
            <img src="../images/no@2x.png" alt="">
            <div>暂无数据</div>
        </div>
    </div>
</template>
<script>
    import format from 'date-fns/format';
    import { messageList } from "../constants/api";
    import https from "../https";
    export default {
        components: {
        },
        data() {
            return {
                list: []
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            async getList() {
                const json = await https.fetchPost(messageList, {
                    pageIndex: 1,
                    pageSize: 1000
                })
                if (json.data.code === 200) {
                    this.list = json.data.data.bussData;
                }
            }
        }
    };
</script>
<style lang="scss" scoped>
    .remind {
        height: 100%;
        background-color: #FAFAFA;
        padding: .2rem .3rem;
        .remind-item {
            background:rgba(255,255,255,1);
            box-shadow:0px 0px .09rem .01rem rgba(189,189,189,0.19);
            border-radius:.10rem;
            padding: .3rem .2rem;
            margin-bottom: .2rem;
            .top {
                color: #B3B3B3;
                font-size: .28rem;
                margin-bottom: .22rem;
                .remind-icon {
                    img {
                        width: .25rem;
                        vertical-align: middle;
                    }
                }
            }
            .hidden {
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                text-overflow: ellipsis;
            }
        }
        .empty {
            margin-top: 50%;
            text-align: center;

            img{
                width: 1.50rem;
                vertical-align: middle;
            }
            div {
                margin-top: .49rem;
                font-size: .3rem;
                color: #999999;
            }
        }
    }
</style>

